<template>
	<view class="header-wrap">
		<view class="container">
			<view class="btn-select-lebal" style="display: none;">
				<view v-for="(item, index) in selectionAllTpes" :key="index"
					:class="selectAllIndex==index?'btn-select-active':'btn-select'" @click="checkSelectAllBtn(index)">
					{{item}}
				</view>
			</view>
			<view class="filter-container">
				<view v-for="(item, index) in selections" :key="index" style="display: -webkit-inline-box;">
					<view @click="checkSelectBtn(index)">
						<view class="title-wrap">{{item}}</view>
						<view :class="selectIndex==index+1?'bottom_bg':null"></view>
					</view>
					<image class="address_down.png" src="../images/list/download.png" mode=""></image>
				</view>
			</view>
			<scroll-view scroll-y="true" class="data-container" ref="listContent" @scrolltolower="loadMore()"
				:refresher-triggered="refresh" refresher-enabled="true" style="height: 95vh;"
				@refresherrefresh="onRefresh">
				<view style="padding-top: 60rpx;" v-if=" (!listDatas || listDatas.length == 0)">
					<bh-no-more></bh-no-more>
				</view>
				<view v-for="(data, index) in listDatas" :key="index">
					<view class="item-container" @click="checkDetail(data.id)" style="min-height: 256rpx;">
						<image class="item-img" :src="data.facadePicture"></image>
						<view>
							<view class="item-title" style="padding-top: 12rpx;">
								{{data.area}}{{data.street}}{{getIndustryType(data.industryId)}}转让
							</view>
							<view class="item-address-area">
								<image src="../images/list/address.png"
									style="width: 20rpx;height: 22rpx;;margin-right: 20rpx"></image>
								<view class="lebal">{{data.area}}</view>
								<view class="lebal">·</view>
								<view class="lebal">{{data.address}}</view>
							</view>
							<view style="display: flex;flex-direction: row;">
								<view class="item-lebal" v-for="(lebalItem, j) in data.labelDtoList" :key="j">
									{{lebalItem.labelName}}
								</view>
							</view>
							<view style="display: flex;">
								<image src="../images/list/rent.png"
									style="width: 32rpx;height: 32rpx;margin-right: 20rpx;"></image>
								<view class="item-price">{{data.rent}}/月</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 蒙版 -->
			<view class="black-bg" v-if="showPromp" @click="closeModel">

			</view>

			<!-- 租金和面积-->
			<!-- <money-area-popup :dataList='getMoneyAreaDataList'
					@changeData="getMoneyAreaChageSelect"></money-area-popup> -->
			<!-- 租金和面积-->
			<view class="top-rent-money" v-if="showPromp==3">
				<view class="rent-pomp-title1">
					选择一
				</view>
				<view class="rent-item-content">
					<view v-for="(item, index) in rentList" :key="index"
						:class="selectRentMoneyIndex==index?'rent-money-item-active':'rent-money-item'"
						@click="checkSelectRentMoneyBtn(index)">
						{{item.name}}
					</view>
				</view>
				<view class="rent-pomp-title1">
					自定义
				</view>
				<view class="rent-money-custom">
					<input class="low" style="width:128rpx;height:64rpx;" placeholder="输入" type="number"
						v-model="low" />
					<view>至</view>
					<input class="low" style="width:128rpx;height:64rpx;" placeholder="输入" type="number"
						v-model="high" />
				</view>
				<view class="btn-bottom" style="display: flex;">
					<view class="rent-btn" style="margin-right: 100rpx;" @click="settingRentMoneyArgs(false)">取消
					</view>
					<view class="rent-btn-sure" @click="settingRentMoneyArgs(true)">确定</view>
				</view>
			</view>

			<!-- 面积-->
			<view class="top-rent-money" v-if="showPromp==2">
				<view class="rent-pomp-title1">
					选择一
				</view>
				<view class="rent-item-content">
					<view v-for="(item, index) in acreageList" :key="index"
						:class="selectRentMoneyIndex==index?'rent-money-item-active':'rent-money-item'"
						@click="checkSelectRentMoneyBtn(index)">
						{{item.name}}
					</view>
				</view>
				<view class="rent-pomp-title1">
					自定义
				</view>
				<view class="rent-money-custom">
					<input class="low" style="width:128rpx;height:64rpx;" placeholder="输入" type="number"
						v-model="low" />
					<view>至</view>
					<input class="low" style="width:128rpx;height:64rpx;" placeholder="输入" type="number"
						v-model="high" />
				</view>
				<view class="btn-bottom" style="display: flex;">
					<view class="rent-btn" style="margin-right: 100rpx;" @click="settingRentMoneyArgs(false)">取消
					</view>
					<view class="rent-btn-sure" @click="settingRentMoneyArgs(true)">确定</view>
				</view>
			</view>
			<show-area-street-top-sheet :show="showAreaStreetSheet" v-if="showPromp==1" :current-dto="postDto"
				@close="showAreaStreetSheetClose" @confirm="showAreaStreetConfirm">

			</show-area-street-top-sheet>
		</view>
	</view>
</template>

<script lang="ts">
	import {
		Api
	} from '../../api/api'
	// import MoneyAreaPopup from '../../components/custom_views/money-area-popup.vue';
	import { CustomDict } from '../../components/custom_views/custom_dict';
	const components_custom_views_custom_dict = require("../../components/custom_views/custom_dict.js");
	import bhNoMore from '../../components/custom_views/bh-no-more.vue';
	import showAreaStreetTopSheet from '../../components/custom_views/show-area-street-top-sheet.vue';
	import { showAreaStreetSheetMixin } from '../../components/custom_views/show-area-street-sheet-mixin'
	import { getDefaultPostDto } from '@/components/post_item/post_add_sell_dto';
	import { Dict } from '../../components/custom_views/dict';
	export default {
		components: {
			bhNoMore,
			showAreaStreetTopSheet
		},
		mixins: [showAreaStreetSheetMixin],
		data() {
			return {
				...showAreaStreetSheetMixin.initData,
				selectionAllTpes: ['全部', '档口', '餐饮'],
				selections: ['区域', '面积', '租金', '更多'],
				postDto: getDefaultPostDto(Dict.PostMainTypeEnum.Shop.childs.ShopSell.value),
				industryTypeList: CustomDict.customDictList(Dict.IndustryTypeEnum),
				acreageList: components_custom_views_custom_dict.CustomDict.acreageList,
				rentList: components_custom_views_custom_dict.CustomDict.rentList,
				selectIndex: null,
				selectAllIndex: null,
				selectRentMoneyIndex: null,
				showPromp: 0, //展示弹窗
				rentMin: 0,
				rentMax: 1000000,
				acreageMin: 0,
				acreageMax: 10000,
				industryId: '',
				low: null,
				high: null,
				pageNum: 1,
				pageSize: 10,
				listDatas: [],
				showAreaStreetSheet: true,
				refresh: false,
				noMoreData:false,//判断更多数据
			}
		},
		computed: {
			getMoneyAreaDataList() {
				if (this.selectIndex == 2) {
					this.moneyAreaDataList = this.acreageList
				} else if (this.selectIndex == 3) {
					this.moneyAreaDataList = this.rentList
				}
				return this.moneyAreaDataList
			},

		},
		methods: {
			initApiData() {
				this.checkSelect()
				let params = {}
				params['industryId'] = this.industryId
				params['rentMin'] = this.rentMin
				params['rentMax'] = this.rentMax
				params['acreageMin'] = this.acreageMin
				params['acreageMax'] = this.acreageMax
				params['areaCode'] = this.postDto.areaCode
				params['street'] = this.postDto.street
				params['pageNum'] = this.pageNum
				params['pageSize'] = this.pageSize
				// Api.PostSellApi.list(查询条件)   根据条件筛选。
				/** 分页查询转店列表 */
				Api.PostSellApi.list(params, (res) => {
					if (res.code == 200) {
						let listData = res.data.records;
						this.listDatas = [...this.listDatas, ...listData];
						this.pageNum+= 1;
						//  如果请求到的数据小于pageSize，说明已经没有更多数据，可以停止加载
						
						if (listData.length < this.pageSize) {
							this.noMoreData=true
						}
					}
				})
			},
			onRefresh() {
				this.refresh = true;
				uni.showToast({
					title: "下拉刷新",
					duration: 1500,
					icon: "none"
				})
				// 这里不能直接让refresh直接为false，否则可能会发生下拉加载无法复位的情况
				this.pageNum=1;
				this.listDatas=[]
				this.initApiData()
				setTimeout(() => {
					this.refresh = false;
				}, 500)
			},
			//加载更多
			loadMore() {
				if(!this.noMoreData){
				this.initApiData();	
				}
			},
			getIndustryType(id) {

				let same = this.industryTypeList.filter((item) => {
					return item.value == id
				})
				if (same) {
					return same[0].name
				}
			},
			//关闭地区弹窗
			closeModel() {
				this.showPromp = null
				this.showAreaStreetSheet = false
			},
			//地弹窗点击确认
			showAreaStreetConfirm(postFieldData : any) {
				Object.assign(this.postDto, postFieldData)
				this.showAreaStreetSheet = false
				this.showPromp = 0
				console.log(this.postDto.area + "点击" + this.postDto.street)
				this.initApiData()
			},
			checkSelectBtn(index : number) {
				this.selectIndex = index + 1
				console.log(index + "点击")
				this.showPromp = index + 1
				if (this.selectIndex == 1) {
					this.showAreaStreetSheet = true
				} else {
					this.showAreaStreetSheet = false
				}
				if (this.selectRentMoneyIndex) {
					this.selectRentMoneyIndex = null
				}
				this.low = null
				this.high = null
			},
			checkSelectAllBtn(index : number) {
				this.selectAllIndex = index
				console.log(index + "点击")
			},

			//请求前清理参数
			checkSelect() {
				switch (this.selectIndex) {
					case 1:
						this.rentMin = 0
						this.rentMax = 1000000
						this.acreageMin = 0
						this.acreageMax = 10000

						break;
					case 2:
						this.rentMin = 0
						this.rentMax = 1000000
						this.postDto.area = ''
						this.postDto.areaCode = ''
						this.postDto.street = ''
						break;
					case 3:
						this.acreageMin = 0
						this.acreageMax = 10000
						this.postDto.area = ''
						this.postDto.areaCode = ''
						this.postDto.street = ''
						break;
				}
			},
			//点击租金项
			checkSelectRentMoneyBtn(index : Number) {
				this.selectRentMoneyIndex = index
				console.log(index + "点击项")
			},
			settingRentMoneyArgs(selectSetting : Boolean) {
				this.showPromp = 0
				if (selectSetting) {
					console.log(this.low + "点击项" + this.high)
					if (this.selectIndex == 2) {///面积
						if (this.low && this.high) {
							this.acreageMin = this.low
							this.acreageMax = this.high
						} else if (this.selectRentMoneyIndex) {
							console.log("改变面积", this.selectRentMoneyIndex);
							let rentAreaAry = this.acreageList[this.selectRentMoneyIndex].value.split("-");
							this.acreageMin = rentAreaAry[0];
							this.acreageMax = rentAreaAry[1];
						}
					} else if (this.selectIndex == 3) {//租金
						if (this.low && this.high) {
							this.rentMin = this.low
							this.rentMax = this.high
						} else if (this.selectRentMoneyIndex) {
							console.log("改变月租金", this.selectRentMoneyIndex);
							let rentAry = this.rentList[this.selectRentMoneyIndex].value.split("-");
							this.rentMin = rentAry[0];
							this.rentMax = rentAry[1];
						}
					}

					this.initApiData()
				} else {
					this.low = null
					this.high = null
					this.selectRentMoneyIndex = null
				}

			},
			getMoneyAreaChageSelect(changeData : any) {
				this.showPromp = 0
				console.log('点击的changeData信息', changeData)
				this.initApiData()
			},
			changeAcreage(e) {
				console.log("改变面积", e);
				let acreageAry = this.acreageList[e.detail.value].value.split("-");
				this.postDto.lowerAcreage = acreageAry[0];
				this.postDto.upperAcreage = acreageAry[1];
			},
			changeRent(e) {
				console.log("改变月租金", e);
				let rentAry = this.rentList[e.detail.value].value.split("-");
				this.postDto.lowerRent = rentAry[0];
				this.postDto.upperRent = rentAry[1];
			},
			//跳转详情---后续加上data参数
			checkDetail(id) {
				uni.navigateTo({
					url: "/PostPage/post_detail_sell/post_detail_sell?postId=" + id
				})
			},
		},
		watch: {},

		// 页面周期函数--监听页面加载
		onLoad() {
			this.initApiData()
		},
		// 页面周期函数--监听页面初次渲染完成
		onReady() { },
		// 页面周期函数--监听页面显示(not-nvue)
		onShow() { },
		// 页面周期函数--监听页面隐藏
		onHide() { },
		// 页面周期函数--监听页面卸载
		onUnload() { },
		// 页面处理函数--监听用户下拉动作
		// onPullDownRefresh() { uni.stopPullDownRefresh(); },
		// 页面处理函数--监听用户上拉触底
		// onReachBottom() {},
		// 页面处理函数--监听页面滚动(not-nvue)
		// onPageScroll(event) {},
		// 页面处理函数--用户点击右上角分享
		// onShareAppMessage(options) {},
	}
</script>

<style scoped lang="scss">
	page {
		height: 100vh;
	}

	.container {
		background: url(../../static/images/container-bg.png);
		width: 100%;
		height: 100vh;
	}

	/* 普通按钮 */
	button {
		// padding: 10px 20px;
		// border: 1px solid #ddd;
		// background: #fff;
		// cursor: pointer;
		font-size: x-small;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	/* 点击后添加阴影 */
	button:active {
		// box-shadow: 1px 1px 3px yellow;

	}

	/* 点击后添加阴影 */
	button::after {
		// box-shadow: 1px 1px 3px yellow;
		border: none;
	}

	.title-wrap {
		margin-top: 9px;
		margin-left: 18px;
		font-size: 18px;
	}

	.btn-select-lebal {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		background: #ECF0F1;
		padding: 8rpx;

		.btn-select {
			background: #ECF0F1;
			margin-right: 10rpx;
			width: 222rpx;
			height: 80rpx;
			border-radius: 8px;
			font-size: 18px;
			font-weight: 500;
			line-height: 18px;
			text-align: center;
			letter-spacing: 0px;
			padding-top: 24rpx;
			font-feature-settings: "kern" on;
			color: #333333;
		}

		.btn-select-active {
			background: #ffffff;
			margin-right: 10rpx;
			width: 222rpx;
			height: 80rpx;
			border-radius: 8px;
			font-size: 18px;
			font-weight: 500;
			line-height: 18px;
			text-align: center;
			letter-spacing: 0px;
			padding-top: 24rpx;
			font-feature-settings: "kern" on;
			color: #333333;
		}
	}

	.bottom_bg {
		width: 24px;
		height: 4px;
		margin-left: 24px;
		background: #F8D247;
	}

	.address_down.png {
		width: 16rpx;
		height: 10rpx;
		margin-top: 20px;
	}

	.filter-container {
		display: flex;
		justify-content: space-between;
		padding-right: 20rpx;
		padding-left: 20rpx;
		font-size: smaller;
		height: 44px;
		background: white;
	}

	.data-container {
		.item-container {
			display: flex;
			margin: 16rpx 16rpx 40rpx 16rpx;
			background: white;
			border-radius: 4px;
			padding: 30rpx 22rpx 34rpx 22rpx;
		}

		.item-img {
			width: 220rpx;
			height: 192rpx;
			height: auto;
			padding: 10rpx;
		}

		.item-title {
			font-size: 16px;
			font-weight: bolder;
			font-size: 16px;
			font-weight: 500;
			line-height: 14px;
			letter-spacing: 0px;
			margin-bottom: 22rpx;
			font-feature-settings: "kern" on;
			color: #333333;
		}

		.item-address-area {
			display: flex;
			font-size: 12px;
			margin-bottom: 22rpx;

			.lebal {
				margin-right: 4rpx;
				font-size: 12px;
				font-weight: normal;
				line-height: 12px;
				letter-spacing: 0px;

				font-feature-settings: "kern" on;
				color: #999999;
			}
		}

		.item-lebal {
			padding: 8rpx 12rpx;
			font-size: 24rpx;
			font-weight: 500;
			background: #F5F6F6;
			margin-right: 10px;
			margin-bottom: 22rpx;

			line-height: 12px;
			text-align: center;
			letter-spacing: 0px;
			font-feature-settings: "kern" on;
			color: rgba(0, 0, 0, 0.5);
		}

		.item-price {
			font-size: 18px;
			font-weight: bold;
			line-height: 12px;
			text-align: center;
			letter-spacing: 0px;
			font-feature-settings: "kern" on;
			color: #EF2D2D;
			margin-top: 4rpx;
		}
	}

	.black-bg {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 70rpx;
		background: rgba(0, 0, 0, 0.45);

	}

	.top-rent-industry {
		z-index: 9999;
		height: 850rpx;
		top: 0rpx;
		position: absolute;
		background: white;
		border-bottom-right-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		padding: 0rpx 32rpx 48rpx 32rpx;
		width: -webkit-fill-available;

		.rent-industry-item {
			background: #FFFFFF;
			box-sizing: border-box;
			height: 88rpx;
			font-size: 14px;
			font-weight: normal;
			line-height: 40rpx;
			text-align: left;
			padding-left: 20rpx;
			padding-top: 24rpx;
			letter-spacing: 0px;
			color: #333333;
			border-bottom: 1px dashed;
			font-size: 14px;
			font-weight: normal;
			line-height: 20px;
			letter-spacing: 0px;
			color: #666666;
		}

		.rent-industry-item-active {
			background: #FFFFFF;
			box-sizing: border-box;
			height: 88rpx;
			font-size: 14px;
			font-weight: normal;
			line-height: 40rpx;
			text-align: left;
			padding-left: 20rpx;
			padding-top: 24rpx;
			letter-spacing: 0px;
			color: #333333;
			border-bottom: 1px dashed;
			display: flex;
			justify-content: space-between;
			font-size: 14px;
			font-weight: 600;
			line-height: 20px;
			letter-spacing: 0px;
			color: rgba(0, 0, 0, 0.85);
		}

		.rent-btn {
			width: 165px;
			height: 40px;
			border-radius: 100px;
			opacity: 1;
			background: #FFFFFF;
			box-sizing: border-box;
			border: 1px solid rgba(0, 0, 0, 0.85);
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			line-height: 60rpx;
			text-align: center;
			letter-spacing: 0px;
			color: #333333;
		}

		.rent-btn-sure {
			width: 165px;
			height: 40px;
			border-radius: 100px;
			opacity: 1;
			background: #F8D247;
			box-sizing: border-box;
			border: 1px solid rgba(0, 0, 0, 0.85);
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			line-height: 60rpx;
			text-align: center;
			letter-spacing: 0px;
			color: #333333;
		}
	}

	.top-rent-money {

		z-index: 9999;
		height: 500rpx;
		top: 0rpx;
		position: absolute;
		background: white;
		border-bottom-right-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		padding: 48rpx 32rpx 48rpx 32rpx;
		width: -webkit-fill-available;

		.checkItem {}

		.rent-item-content {
			display: flex;
			flex-wrap: wrap;
			margin-top: 30rpx;
		}

		.rent-money-item {
			background: #FFFFFF;
			box-sizing: border-box;
			border: 1px solid rgba(0, 0, 0, 0.85);
			height: 64rpx;
			width: 144rpx;
			border-radius: 16px;
			font-size: 14px;
			font-weight: normal;
			line-height: 40rpx;
			text-align: center;
			letter-spacing: 0px;
			color: #333333;
			padding-top: 12rpx;
			margin-right: 28rpx;
			margin-bottom: 32rpx;
		}

		.rent-money-item-active {
			background: #F8D247;
			box-sizing: border-box;
			border: 1px solid rgba(0, 0, 0, 0.85);
			height: 64rpx;
			width: 144rpx;
			border-radius: 16px;
			font-size: 14px;
			font-weight: normal;
			line-height: 40rpx;
			text-align: center;
			letter-spacing: 0px;
			color: #333333;
			padding-top: 12rpx;
			margin-right: 28rpx;
			margin-bottom: 32rpx;
		}

		.rent-money-custom {
			display: flex;
			align-items: baseline;
			margin-top: 32rpx;
			margin-bottom: 32rpx;
		}

		.low {
			width: 73px;
			height: 36px;
			border-radius: 4px;
			opacity: 1;
			box-sizing: border-box;
			border: 1px solid #333333;
			text-align: center;
		}

		.rent-btn {
			width: 165px;
			height: 40px;
			border-radius: 100px;
			opacity: 1;
			background: #FFFFFF;
			box-sizing: border-box;
			border: 1px solid rgba(0, 0, 0, 0.85);
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			line-height: 60rpx;
			text-align: center;
			letter-spacing: 0px;
			color: #333333;
		}

		.rent-btn-sure {
			width: 165px;
			height: 40px;
			border-radius: 100px;
			opacity: 1;
			background: #F8D247;
			box-sizing: border-box;
			border: 1px solid rgba(0, 0, 0, 0.85);
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			line-height: 60rpx;
			text-align: center;
			letter-spacing: 0px;
			color: #333333;
		}
	}


	.list-footer {
		padding: 40rpx;
		text-align: center;
	}

	.load-more {
		cursor: pointer;
	}
</style>